import publicStyle from "../../assets/css/public.module.css";
import style from '../../assets/css/Register/register.module.css'
import {Button, Form, Input, message, Modal, Table} from "antd";
import {DeleteTwoTone, ExclamationCircleOutlined, SearchOutlined, SnippetsTwoTone} from "@ant-design/icons";
import React, {useEffect, useState} from "react";
import type {ColumnsType} from "antd/es/table";
import {
    delRegister,
    getRegisterDetails,
    getRegisterList,
    getRegisterSearch
} from "../../api/DynamicPersonal/RegisterApi.ts";
import {MODAL_WIDTH} from "../../utils/publicStyleAndRules.ts";

const {confirm} = Modal;

interface DataType {
    key: React.Key;
    id: number;
    name: string;
    department: string;
    further: string;
    '48report': string;
}

const formItemLayout = {
    labelCol: {span: 4},
    // wrapperCol: {span: 14},
};
export default function RegistrationManagement() {

    // 表格列
    const columns: ColumnsType<DataType> = [
        {
            title: '订单编号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '患者姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '挂号科室',
            dataIndex: 'department',
            key: 'department',
        },
        {
            title: '是否为复诊',
            dataIndex: 'further',
            key: 'further',
        },
        {
            title: '是否自我申报48小时核酸',
            dataIndex: '48report',
            key: '48report',
        },
        {
            title: '订单操作',
            key: Date.now().toString(),
            render: (_, record) =>
                <div className={style.operation}>
                    <SnippetsTwoTone className={style.btn} onClick={() => showModal(record.id)}/>
                    <DeleteTwoTone className={style.btn} onClick={() => showDeleteConfirm(record.id)}/>
                </div>,
        },
    ];


    // 查询表单
    const [form] = Form.useForm();

    // 详情表单
    const [infoForm] = Form.useForm();

    // 选中的表格行id
    const [selectIds, setIds] = useState<number[]>([]);

    // module显隐
    const [isModalOpen, setIsModalOpen] = useState(false);

    // 表格数据
    const [data, setData] = useState<DataType[]>([]);

    // 表格分页
    const [pagination, setPagination] = useState({
        page: 1,
        size: 10,
        total: 0,
    });

    // 处理删除挂号
    const handleDelRegister = async (ids: any) => {
        const res = await delRegister({ids: JSON.stringify([ids])});
        if (res) {
            await handleGetRegisterList()
        }
    }

    // 查看详情挂号
    const handleGetRegisterDetails = async (id: number) => {
        const res = await getRegisterDetails({id});
        if (res) {
            infoForm.setFieldsValue(res.data[0])
        }
    }

    // 获取列表数据
    const handleGetRegisterList = async () => {
        const res = await getRegisterList({page: pagination.page, size: pagination.size});
        if (res) {
            setData(res.data)
            setPagination({...pagination, total: res.total});
        }
    }

    // 查询挂号单
    const handelGetRegisterSearch = async (id: number, phone: string) => {
        const res = await getRegisterSearch({page: pagination.page, size: pagination.size, id, phone});
        if (res) {
            setData(res.data)
            setPagination({...pagination, total: res.total});
        }
    }

    // 提交查询表单
    const onFinish = async (values: any) => {
        await handelGetRegisterSearch(values.id, values.phone)
    };

    useEffect((): void => {
        handleGetRegisterList()
    }, []);


    // 复选框操作
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[]) => {
            setIds(selectedRowKeys);
        },
    };

    // 删除按钮点击事件
    const showDeleteConfirm = (id: number) => {
        confirm({
            title: '系统提示',
            icon: <ExclamationCircleOutlined/>,
            content: '您正在删除用户挂号信息,此操作不可逆，删除后患者需要重新挂号，确定删除吗？',
            okText: '确认删除',
            okType: 'danger',
            cancelText: '取消',
            width: 600,
            async onOk() {
                await handleDelRegister(id)
            },
            onCancel() {
                message.error('用户取消删除')
            },
        });
    };

    // 展示model
    const showModal = async (id: number) => {
        await handleGetRegisterDetails(id)
        setIsModalOpen(true);
    };

    // 确认按钮点击事件
    const handleOk = () => {
        setIsModalOpen(false);
    };

    //  取消按钮点击事件
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <div className={publicStyle.container}>
            {/*查询框*/}
            <div className={publicStyle.search}>
                <Form
                    layout={'inline'}
                    form={form}
                    colon={false}
                    onFinish={onFinish}
                >
                    <Form.Item label="订单编号" name="id">
                        <Input
                            prefix={<SearchOutlined/>}
                            placeholder="输入要查询订单编号"
                            className={publicStyle.searchInput}
                        />
                    </Form.Item>
                    <Form.Item label="手机号" name="phone">
                        <Input
                            prefix={<SearchOutlined/>}
                            placeholder="输入要查询手机号"
                            className={publicStyle.searchInput}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button
                            type="primary"
                            htmlType="submit"
                            icon={<SearchOutlined/>}
                            className={style.searchBtn}
                        >
                            查询
                        </Button>
                    </Form.Item>
                </Form>
                <Button type="default" onClick={() => handleDelRegister(selectIds)}>删除选中</Button>
            </div>

            {/*表格*/}
            <div className={publicStyle.content}>
                <Table
                    rowKey={record => record.id}
                    rowSelection={{
                        type: 'checkbox',
                        ...rowSelection,
                    }}
                    size="small"
                    columns={columns}
                    dataSource={data}
                    pagination={{position: ['bottomLeft'], showSizeChanger: true, showQuickJumper: true}}
                />
            </div>

            {/*弹出框*/}
            <div className={publicStyle.modal}>
                <Modal
                    title="挂号详情"
                    open={isModalOpen}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    width={MODAL_WIDTH}
                    closable={false}
                    maskClosable={false}
                >
                    <Form
                        {...formItemLayout}
                        colon={false}
                        form={infoForm}
                        layout={'horizontal'}
                        initialValues={{
                            layout: 'horizontal'
                        }}
                    >
                        <Form.Item label="订单编号" name="id">
                            <Input disabled/>
                        </Form.Item>
                        <Form.Item label="挂号时间" name="regtime">
                            <Input disabled/>
                        </Form.Item>
                        <Form.Item label="患者姓名" name="name">
                            <Input disabled/>
                        </Form.Item>
                        <Form.Item label="是否为复诊" name="further">
                            <Input disabled/>
                        </Form.Item>
                        <Form.Item label="48H核酸报告" name="48report">
                            <Input disabled/>
                        </Form.Item>
                        <Form.Item label="挂号科室" name="department">
                            <Input disabled/>
                        </Form.Item>
                        <Form.Item label="手机号" name="phone">
                            <Input disabled/>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </div>
    )
}
